<template>
  <div class="UserLogin-Page">
    <div class="head-top">
      <div style="height: 45px"></div>
      <div class="alert alert-danger" v-if="errMes" style="width:95%;margin: auto">{{errMes}}<span class="close" @click="errMes=''">&times;</span></div>
    </div>
    <div class="head">
      <h4>聚美优品登录</h4>
      <hr>
    </div>
    <div class="bodys">
      <el-form ref="form" :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules">
        <el-form-item prop="login" style="margin-bottom: 0px">
          <el-input placeholder="请输入登录名" v-model="formLabelAlign.login">
            <template slot="prepend">登录名 :</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="formLabelAlign.password" style="margin-top: 20px">
            <template slot="prepend"> 密  &nbsp; 码 :</template>
          </el-input>
        </el-form-item>
      </el-form>
      <hr>
      <div class="block">
        <el-button-group>
          <el-button @click="doLogin()" type="success" > 登 录 </el-button>
          <el-button  type="success" > 注 册 </el-button>
        </el-button-group>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="foot">
    </div>
  </div>
</template>

<script>
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
  export default {
    components: {ElFormItem},
    name: 'UserLogin',
    data() {
      return {
        errMes: '',
        labelPosition: 'right',
        formLabelAlign: {},
        rules: {
          login: {required: true, message: '登录名不能为空'},
          password: {required: true, message: '密码不能为空'},
        }
      }
    },
    methods: {
      doLogin(){
        this.$refs.form.validate(valid => {
//              console.log(valid);valid拿到的表单提交false或者true
          if (!valid) {//如果验证不通过
            return;
          }
          this.$http.post('/user', this.formLabelAlign)
            .then(resp => {
              let data = resp.data;
//                console.log(data);拿到后台返回的消息
              if (data.status == true) {
                console.log(data.user);
                this.$router.push('/wxindex');
              } else {
                this.errMes = data.error;
              }
            })
        })
      }
    }
  }
</script>
<style lang="less">
  body{
    /*background: linear-gradient(seashell,whitesmoke,white);*/
    background-color: seashell;
  }
  .UserLogin-Page {
    min-width: 320px;max-width:1024px ;
    margin: auto;
    /*margin-top: 150px;*/
  }
  .head,.bodys,.foot{
    text-align: center;
    margin: auto;margin: 10px;
  }
  h4{color: olivedrab}
  .block{
    float: right;
  }
  .head-top{
    width: 100%;height: 150px;
    /*background-color: black;*/
  }
  .tilte{
    width: 95%;height: 50px;margin: auto;background-color: burlywood;border-radius: 20px;
    display: block;border: solid 1px crimson;
  }
  /*.a{height: 80px;}*/

  @media(min-width:500px){
    .UserLogin-Page{
      width: 500px;height: 380px;background-color: white;
      border: double black;border-radius: 50px;margin-top: 150px;
    }
    .head-top{height: 80px;border-radius: 50px}
    h4{
      color: darkseagreen;margin-top: 20px;
    }
    .a{height: 20px}

  }
</style>
